<template>
  <div class="userMenu" v-if="userMenuFlag">
    <ul>
      <li
        v-for="item in menuList"
        :key="item.type"
        @click="selectUserMenu(item)"
      >
        {{ item.value }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    userMenuFlag: {
      type: Blob,
    },
    menuList: [],
  },
  setup(props, ctx) {
    const { emit } = ctx;
    console.log(props);
    function selectUserMenu(item) {
      emit("selectUserMenu", item);
    }
    return { selectUserMenu };
  },
};
</script>

<style lang="scss">
.userMenu {
  position: absolute;
  width: 150px;
  background-color: #ffffff;
  top: 50px;
  left: -59px;
  li {
    border: 1px solid #797979;
    cursor: pointer;
  }
  li:hover {
    background-color: #e9eef3;
  }
  // background-color: pink;
}
</style>